<template>
    <section class="mxy-main base-main pr">
      <img class="page-bg" src="../../assets/img/mxy_activity/mxy_page_bg.png" alt="">
      <div class="content pa text-c">
        <div class="text-c">
          <input class="color999 fs17 text-c" type="number" v-model="code" placeholder="請輸入兌換碼領五周年福利" oninput="if(value.length>7)value=value.slice(0,7)">
        </div>
        <img @click="handleGetWelfare" class="get-btn" src="../../assets/img/mxy_activity/mxy_btn_bg.png" alt="">
        <p class="colorFFF fs15" @click="handleIntegralExchange">進積分商城逛逛 <i class="iconfont iconright fs14"></i></p>
      </div>
      <transition name="fade">
        <div class="popW" v-if="isShowPopW">
          <div class="content pa">
            <img src="../../assets/img/mxy_activity/mxy_popw_bg.png" alt="">
            <p @click="handleIntegralExchange" class="pa"></p>
            <img src="../../assets/img/mxy_activity/mxy_btn_close.png" alt="" class="close-btn pa" @click="isShowPopW=false">
          </div>
        </div>
      </transition>
    </section>
</template>

<script type="text/ecmascript-6">

  export default {
    data() {
      return {
        code:'',
        isShowPopW:false,//领取福利弹窗
      }
    },
    watch:{

    },
    methods: {
      //点击领取
      handleGetWelfare(){
        this.isShowPopW = true;
      },
      handleIntegralExchange(){
        this.$router.push({
          name:'integralExchange'
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  @import '../../assets/css/manXingYunActivity.scss';
</style>
